<template>
<div class="detailed">
  <el-affix :z-index="1" >
      <div class="sidebar">
      <div class="avatar">
        <el-image :src="me.avatar" fit="fill"></el-image>
      </div>
      <div class="function">
        <el-link :underline="false" href="#" icon="el-icon-download">下载</el-link>
        <el-link :underline="false" href="#" icon="fa fa-arrow-circle-left fa-lg" @click="goBack">返回上一页</el-link>
        <el-link :underline="false" href="#" icon="el-icon-s-home" @click="go2Index">返回首页</el-link>
      </div>

  </div>
  </el-affix>
    <div class="main_contain" >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>诊断记录</span>
            <span>创建日期:{{date}}</span>
            <i class="fa fa-vcard fa-lg" />
          </div>
        </template>
          <div class="content">
            <div class="basicInfo info">
              <el-descriptions title="个人基本信息" direction="vertical" :column="5" border>
                <el-descriptions-item label="姓名" align="center">{{me.name}}</el-descriptions-item>
                <el-descriptions-item label="性别" align="center">{{me.sex}}</el-descriptions-item>
                <el-descriptions-item label="年龄" align="center">{{me.age}}</el-descriptions-item>
                <el-descriptions-item label="联系电话" align="center">{{me.tel}}</el-descriptions-item>
                <el-descriptions-item label="血型" align="center">
                  <el-tag size="small">{{me.bloodtype}}型</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="过敏史" align="center"
                >{{me.allergicHistory}}</el-descriptions-item
                >
              </el-descriptions>
            </div>
            <div class="doctorInfo info">
              <el-descriptions title="接诊医生信息" direction="vertical" :column="5" border>
                <el-descriptions-item label="姓名" align="center">{{doctor.name}}</el-descriptions-item>
                <el-descriptions-item label="性别" align="center">{{doctor.sex}}</el-descriptions-item>
                <el-descriptions-item label="年龄" align="center">{{doctor.age}}</el-descriptions-item>
                <el-descriptions-item label="职称" align="center">
                  <el-tag size="small">{{doctor.profectionTitle}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="所属科室" align="center">{{doctor.subject}}</el-descriptions-item>
                <el-descriptions-item label="诊室" align="center">{{doctor.roomNo}}</el-descriptions-item>
                <el-descriptions-item label="联系方式" align="center">
                  <div class="content_contain">
                    <span>电话:</span>
                    <el-tag type="plain">{{doctor.tel}}</el-tag>
                  </div>
                  <div class="content_contain">
                    <span>邮箱:</span>
                    <el-tag  type="plain">{{doctor.email}}</el-tag>
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <div class="orderInfo info">
              <el-descriptions title="诊断信息" direction="vertical" :column="1" border>
                <el-descriptions-item label="症状描述">{{appointment.symptom}}</el-descriptions-item>
                <el-descriptions-item label="诊断结果">{{record.cureDescription}}</el-descriptions-item>
                <el-descriptions-item label="诊断药物&诊断服务">
                  <el-table :data="medicines" size="mini" highlight-current-row :row-style="setRow">
                    <el-table-column prop="medicineName" label="药物" align="center"> </el-table-column>
                    <el-table-column prop="medicineType" label="种类" align="center"></el-table-column>
                    <el-table-column prop="specifications" label="规格"  align="center"> </el-table-column>
                    <el-table-column prop="medicineNumber" label="数量" align="center"></el-table-column>
                    <el-table-column prop="medicinePrice" label="价格" align="center"></el-table-column>
                    <el-table-column prop="usaged" label="使用说明" align="center"></el-table-column>
                  </el-table>
                </el-descriptions-item>

                <el-descriptions-item label="医生建议">
                  <span v-for="item in medicines" style="font-size: 16px">
                    {{item.advice}},
                  </span>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <div class="billInfo info">
              <el-descriptions title="账单信息" direction="vertical" :column="1" border>
                <el-descriptions-item label="费用(RMB)">

                  <div>
                    <div class="content_contain">
                      <el-tag type="plain">挂号费</el-tag>
                      <el-divider/>
                      <span>¥{{bill.appoPrice}}</span>
                    </div>

                    <div class="content_contain">
                      <el-tag type="plain">材料费</el-tag>
                      <el-divider/>
                      <span>¥{{bill.price}}</span>
                    </div>
                    <div class="content_contain">
                      <el-tag type="plain">医药费</el-tag>
                      <el-divider/>
                      <span>¥{{cost}}</span>
                    </div>


                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="footer info">
              <p>以上信息均由坚宝医疗提供，若有疑问</p>
              <el-link href="#">请联系客服</el-link>
            </div>
          </div>

      </el-card>
    </div>
</div>
</template>

<script>
import {getRecordDetail} from "../../api/api";
import {ElMessage} from "element-plus";

export default {
  name: "Index",
  mounted() {
    getRecordDetail({
      rid: this.$route.query.id
    },{
      "satoken":localStorage.getItem("satoken")
    }).then(res=>{
      if (res.ret===-1){
        ElMessage.warning({
          type: 'warning',
          message: res.msg
        })
      }
      else{
        ElMessage.success({
          type: 'success',
          message: res.msg
        })
        this.me = res.user
        this.doctor = res.doctor
        this.appointment = res.appointment

        this.medicines = res.medicines
        this.medicines.forEach(value => {
          this.cost += value.medicineNumber * value.medicinePrice
        })

        this.record = res.record
        this.bill = res.bill
        this.date = this.$moment(res.record.recordDate).format('YYYY年-MM月-DD日 HH:mm:ss，dddd')

      }
    }).catch(err=>{
      console.log(err)
    })
  },
  data(){
    return{
      me:{},
      doctor:{},
      bill:{},
      medicines:[],
      record:{},
      appointment: {},
      date: '',
      cost: 0,
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    go2Index(){
      this.$router.push('/index/home')
    },
    setRow(){
      return {
        'font-size': '16px',
      }
    }
  }

}
</script>

<style scoped>
::v-deep(.el-table__row):hover{
  animation: flipInX 0.5s;
}
.content_contain
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  font-size: 18px;
}
.info{
  margin-top: 50px;
}
.box-card{
  position: relative;
  width: 100%;
  height: fit-content;
}
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detailed{
  position: absolute;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  justify-content: space-between;
  background: rgba(0,0,0,.3) fixed no-repeat 0/cover;
}

.main_contain{
  position: relative;
  width: 1050px;
  height: fit-content;
  background: rgba(255,255,255,.6);
}

.sidebar{
  position: absolute;
  height: 100%;
  width: 350px;

}
.function{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-around;
  margin-top: 50px;
}

.function .el-link{
  font-size: 25px;
  color: white;
  margin-top: 50px;
}
.avatar{
  margin: 0 auto;
}


.function .el-link:hover{
  animation: heartBeat 1s;
}

</style>